<template>
	<view class="tab-wrapper flex">
		<view class="tab-item" :class="active==index?'tab-item-active':''" v-for="(item,index) in tabs" :key="item" @tap="$emit('change',index)">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			active:{
				type:[String,Number],
				required:true
			},
			tabs:{
				type:Array,
				required:true
			}
		},
		name:"tab",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.tab-item{
	margin-right: 30rpx;
	padding: 8rpx 30rpx;
	background: #EEEEEE;
	border-radius: 24rpx;
	color: #333333;
	font-size: 28rpx;
	&:last-child{
		margin-right: 0;
	}
}
.tab-item-active{
	background: #E7F1FF;
	border-radius: 24rpx;
	color: $color-blue;
}
</style>
